<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  <title>IP报表</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css">

  <link rel="stylesheet" href="/dist/js/datepicker/css/datepicker.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!--头部-->
  <header id="headerDiv" class="main-header">
    <!--#include  file="/pages/admin/header.html"-->
  </header>

  <!--左侧边栏 -->
  <aside id="sidebarDiv" class="main-sidebar">
    <!--#include  file="/pages/admin/sidebar.html"-->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        <small>IP报表</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i> 数据报表</a></li>
        <li><a href="javascript:void(0);">IP报表</a></li>
      </ol>
    </section>



    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <!--<button class="btn btn-success" onclick="download()"><i class="fa fa-file-excel-o"></i>&nbsp;导出excel</button>-->
              <form role="form" class="form-inline pull-right">
                <label class="control-label">搜索:</label>

                <div class="form-group">
                  <div class="c-datepicker-date-editor J-datepicker-range-day mt10">
                    <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
                    <input id="startDate" placeholder="开始日期" name="" class="c-datepicker-data-input only-date" value="">
                    <span class="c-datepicker-range-separator">~</span>
                    <input id="endDate" placeholder="结束日期" name="" class="c-datepicker-data-input only-date" value="">
                  </div>
                </div>


                <div class="form-group">
                  <select id="searchKey" class="form-control m-b">
                    <option value="ip">IP地址</option>
                    <option value="adsid">广告id</option>
                    <option value="uid">渠道id</option>
                    <option value="gameid">游戏id</option>
                  </select>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <input id="searchValue" type="text" class="form-control">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-primary" onclick="search();"><i class="fa fa-search"></i></button>
                        <button type="button" class="btn btn-primary" id="showAll">展开全部</button>
                    </span>
                  </div>
                </div>
              </form>
            </div>


            <div class="box-body table-responsive">
              <table id="datatable"  class="table table-bordered table-hover table-striped ">
                <thead>
                <tr>
                  <th style=" white-space:nowrap">IP</th>
                  <th style=" white-space:nowrap">地域</th>
                  <th style=" white-space:nowrap">渠道名称</th>
                  <th style=" white-space:nowrap">类型</th>
                  <th style=" white-space:nowrap">广告id</th>
                  <th style=" white-space:nowrap">有效</th>
                  <th style=" white-space:nowrap">重复</th>
                  <th style=" white-space:nowrap">显示/记录时间</th>
                  <th style=" white-space:nowrap">设备信息</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->



        </div>
      </div>
    </section>
    <!-- /.content -->

  </div>

  <!--底部-->
  <footer id="footerDiv" class="main-footer">
    <!--#include  file="/pages/admin/footer.html"-->
  </footer>
  <!-- Control Sidebar -->
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/morris.js/morris.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/bower_components/fastclick/lib/fastclick.js"></script>
<script src="/dist/js/adminlte.min.js"></script>
<script src="/dist/js/store.min.js"></script>
<script src="/dist/js/layer/layer.js"></script>
<script src="/dist/js/laydate/laydate.js"></script>

<script src="/dist/js/datepicker/js/plugins/moment.min.js"></script>
<script src="/dist/js/datepicker/js/datepicker.all.js"></script>


<script>
    var dataMap={};
    var datatable;
    $(function () {
        var DATAPICKERAPI = {

            shortcutMonth: function () {
                // 当月
                var nowDay = moment().get('date');
                var prevMonthFirstDay = moment().subtract(1, 'months').set({ 'date': 1 });
                var prevMonthDay = moment().diff(prevMonthFirstDay, 'days');
                return {
                    now: '-' + nowDay + ',0',
                    prev: '-' + prevMonthDay + ',-' + nowDay
                }
            },

            // 快捷选项option
            rangeShortcutOption1: [
                {
                    name: '今天',
                    day: '0,0'
                },
                {
                    name: '昨天',
                    day: '-1,-1'
                },
                {
                    name: '近7天',
                    day: '-8,-1'
                }, {
                    name: '最近30天',
                    day: '-31,-1'
                }]

        };
        //年月日范围
        $('.J-datepicker-range-day').datePicker({
            hasShortcut: true,
            format: 'YYYY-MM-DD',
            isRange: true,
            shortcutOptions: DATAPICKERAPI.rangeShortcutOption1
        });

        //tab1
        datatable = $("#datatable").DataTable({
            'aLengthMenu' : [20],
            'scrollCollapse': true,//
            'stateSave': false,//保存配置状态
            'processing': false, // 显示loading
            'paging': true,
            'lengthChange': false,
            'searching': false,// 取消搜索框
            'ordering': false,// 取消字段排序
            'info': true,
            'autoWidth': false,
            'deferRender': true,
            'serverSide': true, // ajax请求时必须写本项
            // 'pagingType' : 'full_numbers',
            'ajax': { // ajax请求
                'type': "POST",
                'url': "/lmgame/data/realIpPage",
                'data': function (d) {
                    d.startDate=$("#startDate").val();
                    d.endDate=$("#endDate").val();
                    d.searchKey = $("#searchKey").val();
                    d.searchValue = $("#searchValue").val();
                    return d;
                },
                "error": function (xhr, ts, et) { //XMLHttpRequest, textStatus, errorThrown
                    if (xhr.status === 400) {
                        window.location.href = "/pages/admin/login.html";
                    }
                    if (xhr.status === 403) {
                        window.location.href = "/403.html";
                    }
                }
            },
            'columns': [ // data数据绑定对应列
                {
                    "class":          'details-control',
                    "orderable":      false,
                    "data":           "ip",
                    "defaultContent": ''
                },
                {"data": null},
                {"data": null},
                {"data": "plantype"},
                {"data": "adsid"},
                {"data": "fail"},
                {"data": "visitnum"},
                {"data": null},
                {"data": null}
            ],
            "columnDefs": [
                {
                    targets: 1,
                    render: function (a) {
                        return a.region_id+"/"+a.city_id+"/"+a.isp_id;
                    }
                },
                {
                    targets: 2,
                    render: function (a) {
                        return '<a href="/pages/webmaster/list.html?uid='+a.uid+'">'+a.uname+'</a>';
                    }
                },
                {
                    targets: 4,
                    render: function (a) {
                        return '<a href="/pages/ads/adsList.html?adsid='+a+'">'+a+'</a>';
                    }
                },
                {
                    targets: 5,
                    render: function (a) {
                        if(a !== 'ok' && a != null){
                            return '否';
                        }
                        return '是';
                    }
                },
                {
                    targets: 7,
                    render: function (a) {
                        return a.first_time+" / "+a.last_time;
                    }
                },
                {
                    targets: 8,
                    render: function (a) {
                        let html = "";
                        if(a.os.toUpperCase().indexOf("IOS") !== -1){
                            html += "<i class='fa fa-fw fa-apple' title='"+a.os+"'></i>";
                        }else if(a.os.toUpperCase().indexOf("ANDROID") !== -1){
                            html += "<i class='fa fa-fw fa-android' title='"+a.os+"'></i>";
                        }else{
                            html += "<i class='fa fa-fw fa-windows' title='"+a.os+"'></i>";
                        }
                        if(a.browser_name.toUpperCase().indexOf("CHROME") !== -1){
                            html += "<i class='fa fa-fw fa-chrome' title='"+a.browser_name+" "+ a.screen +"'></i>";
                        }else if(a.browser_name.toUpperCase().indexOf("SAFARI") !== -1){
                            html += "<i class='fa fa-fw fa-safari' title='"+a.browser_name+" "+ a.screen +"'></i>";
                        }else if(a.browser_name.toUpperCase().indexOf("QQ") !== -1){
                            html += "<i class='fa fa-fw fa-qq' title='"+a.browser_name+" "+ a.screen +"'></i>";
                        }else if(a.browser_name.toUpperCase().indexOf("WECHAT") !== -1){
                            html += "<i class='fa fa-fw fa-wechat' title='"+a.browser_name+" "+ a.screen +"'></i>";
                        }else{
                            html += "<i class='fa fa-fw fa-internet-explore' title='"+a.browser_name+" "+ a.screen +"'></i>";
                        }
                        if(a.cookie){
                            html += "-<i class='fa fa-fw' title='支持Cookie'>CK</i>";
                        }
                        if(a.visitnum > 2){
                            html += "-<i class='fa fa-fw fa-user' title='老访客'></i>";
                        }
                        if(a.fail !== 'ok' && a.fail != null){
                            html += "-<i class='fa fa-fw' style='color: red' title='"+a.fail+"'>可疑</i>";
                        }
                        html += "-"+a.costtime+"秒";
                        return html;
                    }
                }
            ],
            "createdRow": function (row, data, index) {
                dataMap[data.id] = data;
            },
            'language': {
                'lengthMenu': "显示 _MENU_ 项结果", // 每页显示多少条
                'zeroRecords': "没有记录！", // 没有记录时显示的内容
                'info': "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项", // 当前页信息
                'infoEmpty': "显示第 0 至 0 项结果，共 0 项", // 当前页信息-没有记录时
                'paginate': {
                    'previous': " << ",
                    'next': " >> "
                }
            }
        });

        $('#datatable tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = datatable.row( tr );
            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }
        } );

        $('#showAll').click(function () {
            $("#datatable tbody td.details-control").each(function () {
                var tr = $(this).closest('tr');
                var row = datatable.row( tr );
                if ( row.child.isShown() ) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child( format(row.data()) ).show();
                    tr.addClass('shown');
                }
            });
        } );

    });

    function format ( d ) {
        return '<table  border="0" >'+
            '<tr>'+
            '<td class="pad20">AGENT:</td>'+
            '<td class="pad20">'+d.useragent+'</td>'+
            '</tr>'+
            '<tr>'+
            '<td class="pad20">投放页面:</td>'+
            '<td class="pad20">'+d.referer_url+'</td>'+
            '</tr>'+
            '<tr>'+
            '<td class="pad20">系统:</td>'+
            '<td class="pad20">'+d.os+'</td>'+
            '</tr>'+
            '<tr>'+
            '<td class="pad20">浏览器:</td>'+
            '<td class="pad20">'+d.browser_name+' / '+d.browser_kernel +' / '+d.browser_version+' / '+d.browser_lang+'</td>'+
            '</tr>'+
            '<tr>'+
            '<td class="pad20">屏幕:</td>'+
            '<td class="pad20">'+d.screen+'</td>'+
            '</tr>'+
            '<tr>'+
            '<td class="pad20">位置:</td>'+
            '<td class="pad20">'+d.ch+'</td>'+
            '</tr>'+
            '<tr>'+
            '<td class="pad20">插件:</td>'+
            '<td class="pad20">'+d.flash+'</td>'+
            '</tr>'+
            '<tr>'+
            '<td class="pad20">页面标题:</td>'+
            '<td class="pad20">'+d.page_title+'</td>'+
            '</tr>'+
            '<tr>'+
            '<td class="pad20">点击坐标:'+d.xy+'</td>'+
            '<td class="pad20">轨迹:'+d.xxyy+'</td>'+
            '</tr>'+
            '</table>';
    }

    function search() {
        datatable.ajax.reload(false);
    }

</script>
<style>

  td.details-control {
    text-decoration: underline;
    cursor: pointer;
  }
  tr.shown td.details-control {
  }
  .pad20{
    padding: 5px;
  }

</style>
</body>
</html>
